<template>
  <div class="container">
    <ant-search></ant-search>
    <div class="sorting">
      <div class="sorting-item" :class="{active:order==0}" @click="changeOrder(0)">综合排序</div>
      <!-- <div class="sorting-item" :class="{active:order==1}" @click="changeOrder(1)">距离</div> -->
      <div class="sorting-item" :class="{active:order==2}" @click="changeOrder(2)">价格</div>
      <div class="sorting-item" :class="{active:order==3}" @click="changeOrder(3)">销量</div>
    </div>
    {{text}}
    <div class v-if="list">
      <ant-store-product v-for="(item,index)  in list" :key="index" :data="item"></ant-store-product>
    </div>

    <i-load-more v-if="!list&&isLoadEnd" :tip="'暂无数据'" :loading="loading" />
    <i-load-more v-if="!isLoadEnd" :tip="'加载更多数据'" :loading="loading" />
    <i-load-more v-if="list&&isLoadEnd" :tip="'没有更多数据了'" :loading="loading" />

    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  import productModule from "@/components/productModule";
  import AntSearch from '@/components/search'
  import AntStoreProduct from '@/components/storeProduct'
  import request from "@/api/request";
  import {
    getMallCollect,
    cancelCollect
  } from "@/utils/index";
  export default {
    components: {
      AntSearch,
      AntStoreProduct
    },
    data() {
      return {
        active: 0,
        order: 0,
        page: 1,
        list: null,
        loading: true,
        isLoadEnd: false
      }
    },
    computed: {
      ...mapState(['mallList', 'mallActive', 'classificationActive', 'locationInfo'])
    },
    methods: {
      ...mapMutations(['setProductList']),
      getProductList() {
        // 获取首页列表
        const {
          cate_id,
          type,
          keywords
        } = this.$route.query
        console.log(this.locationInfo.location)
        this.loading = true
        let option = {
          order: this.order,
          longitude: this.locationInfo.location.lng,
          latitude: this.locationInfo.location.lat,
          page: this.page,
        }
        cate_id ? option.cate_id = cate_id : null
        keywords ? option.keywords = keywords : null

        request.getProductList(option).then(res => {
          if (res.data.list.length < 20) {
            this.isLoadEnd = true
          }
          if (this.list) {
            this.list = this.list.concat(res.data.list)
          } else {
            this.list = res.data.list
          }

          this.loading = false
          console.log(res)
        });
      },
      cancelCollect(data) {
        cancelCollect({
            goods_id: data.goods_id
          }).then(() => {
            this.getProductList()
          })
          .then(res => {
            this.text = "开始成功";
            this.list = res.data.list;
            this.loading = false;
            console.log(res);
            this.text = res.data;
          })
      },
      changeOrder(val) {
        this.page = 1
        this.list = null
        this.order = val
        this.isLoadEnd = false

        this.getProductList()
      },
    },
    onReachBottom() {
      this.page++;
      this.getProductList();
    },
    mounted() {
      this.list = null
      this.getProductList()
    },
    mounted() {
      this.text = "开始加载";
      this.getProductList();
    }
  };
  
  
  // paySign = 
  // appId=wxd678efh567hg6787
  // nonceStr=5K8264ILTKCH16CQ2502SI8ZNMTM67VS
  // package=prepay_id=wx2017033010242291fcfe0db70013231072
  // signType=MD5
  // timeStamp=1490840662
  // key=qazwsxedcrfvtgbyhnujmikolp111111

</script>

<style lang="less">
  .container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .product-list {
    .product {
      padding: 0 15px;
      margin-bottom: 10px;
    }
  }

  .classification {
    flex: 1;
    display: flex;
  }

  .sorting {
    display: flex;
    background: #fff;
    border-bottom: 1rpx solid #f9f9f9;

    .sorting-item {
      flex: 1;
      font-size: 14px;
      color: rgba(160, 160, 160, 1);
      text-align: center;
      padding: 15px;
    }

    .active {
      color: #ee7559;
    }
  }

</style>
